<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
  <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
</head>
<body>
<div id="app">
  <el-row :gutter="15">
    <el-col :span="12" :offset="6">
      <div v-if="!flag"><h1>暂无可参与竞拍的商品,快去创建商品吧!</h1></div>
      <div v-if="flag">
        <el-form ref="roundForm" :model="roundForm" :rules="rules" enctype="multipart/form-data" label-width="80px">
          <h1 align="center">创建竞拍场次</h1>
          <el-form-item label="竞拍商品">
            <el-select v-model="roundForm.productId" placeholder="请选择要参与竞拍的商品">
              <el-option
                      v-for="item in product"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="押金" prop="deposit">
            <el-input v-model.number="roundForm.deposit" placeholder="请输入押金金额"></el-input>
          </el-form-item>
          <el-form-item label="起拍价格" prop="startPrice">
            <el-input v-model.number="roundForm.startPrice" placeholder="请输入起拍价格"></el-input>
          </el-form-item>
          <el-form-item label="加价幅度" prop="stepPrice">
            <el-input v-model.number="roundForm.stepPrice" placeholder="请输入加价幅度"></el-input>
          </el-form-item>
          <el-form-item label="竞拍天数" prop="duration">
            <el-input v-model.number="roundForm.duration" placeholder="请输入竞拍天数"></el-input>
          </el-form-item>
          <el-form-item label="开始时间">
            <div class="block">
              <el-date-picker
                      value-format="yyyy-MM-dd HH:mm:ss"
                      v-model="roundForm.startTime"
                      type="datetime"
                      :picker-options="pickerOptions"
                      placeholder="选择日期时间">
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button @click="publish" type="primary">创建竞拍</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
  </el-row>
</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      roundForm: {
        productId: '',
        deposit: '',
        startPrice: '',
        stepPrice: '',
        duration: '',
        startTime: ''
      },
      flag:'',
      product: [],
      rules: {
        deposit: [
          {required: true, message: '请输入押金金额', trigger: 'blur'},
          {pattern: /^[0-9]+(\.[0-9]{1,2})?$/, message: '金额格式不正确', trigger: 'blur'}
        ],
        startPrice: [
          {required: true, message: '请输入起拍价格', trigger: 'blur'},
          {pattern: /^[0-9]+(\.[0-9]{1,2})?$/, message: '金额格式不正确', trigger: 'blur'}
        ],
        stepPrice: [
          {required: true, message: '请输入加价幅度', trigger: 'blur'},
          {pattern: /^[0-9]+(\.[0-9]{1,2})?$/, message: '金额格式不正确', trigger: 'blur'}
        ],
        duration: [
          {required: true, message: '请输入竞拍天数', trigger: 'blur'},
          {pattern: /^[0-9]+(\.[0-9]{1,2})?$/, message: '天数格式不正确', trigger: 'blur'}
        ]
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7; // 只能选择今天及今天之后的日期
        },
        onPick(picker) {
          const selectedDate = new Date(picker.value);
          const hour = selectedDate.getHours();
          const minute = selectedDate.getMinutes();
          const second = selectedDate.getSeconds();
          const today = new Date();
          if (selectedDate.getTime() < today.getTime()) {
            // 选择的日期在今天之前，给出错误提示
            this.$message.error('请选择今天及今天之后的日期');
            picker.$emit('pick', today); // 将日期重置为今天
          }
        }
      }
    },
    methods: {
      initProduct() {
        $.get("/product/selectByState", function (data) {
          if(data.length === 0){
            app.flag=false;
          }
          if(data.length !== 0){
            app.flag=true;
            app.product = data;
          }
        })
      },
      publish() {
        let params={
          productId:this.roundForm.productId,
          deposit:this.roundForm.deposit,
          startPrice:this.roundForm.startPrice,
          stepPrice:this.roundForm.stepPrice,
          duration:this.roundForm.duration,
          startTime:this.roundForm.startTime
        }
        $.post("/round/publish",params,function (data){
          if(data === "恭喜您发布成功!!!"){
            app.$alert(data);
            return;
          }
          app.$alert(data);
        })
      }

      },
      created() {
        this.initProduct();
      }
    });
</script>
</body>
</html>
